<template>
	<view class="container">
		<titlebara img="@appstatic/message/message_icon_titlebar.png" @rightIconClick="allRead" :back="true" text="系统通知"
			backgroundColor='#f5f5f5'>

		</titlebara>
		<scroll-view scroll-y="true" @scrolltolower="handleToLower"
			:style="'top:'+navigationBarHeight+'px ;'+'height:'+contentHeight+'px;width: 100%;position:fixed;'">
			<view class="system-message-list">
				<view class="item" v-for="(item,index) in systemList" @click="gotoMessage(item)">
					<view style="height: 184px;">
						<image style="width:100%;height:100%;background-color: #000000;" v-if="item.subType==8"
							src="https://dnsverify.pfmoto.com/appstatic/master/masterMessage.jpg"></image>
							<image style="width:100%;height:100%;background-color: #000000;" v-else-if="item.subType==9"
								:src="item.context.split('**')[1]"></image>
						<image style="width:100%;height:100%;background-color: #000000;" v-else :src="item.img"></image>
					</view>
					<view style="height: 36px;padding-left: 16px;padding-top: 16px;padding-bottom: 16px;">
						<view style="float:left">
							<image v-if="item.isReady==1" style="width: 6px;height:6px;padding-bottom: 4px;"
								src="@appstatic/message/message_icon_iteract_dot.png" mode=""></image>
						</view>
						<view style="float: left;padding-left: 6px;width: 200px;">
							<view class="title"><text>{{item.theme}}</text></view>
							<view class="time"><text>{{item.sendTime}}</text></view>
						</view>
					</view>
				</view>
			</view>
			<empty v-if='!systemList.length' text='暂无订单数据' />
		</scroll-view>
	</view>
</template>

<script>
	import titlebara from '@/components/titlebar/titlebar'
	import empty from '@components/empty/empty.vue'
	const app = getApp();
	const util = require("@utils/util.js");
	const network = require("@manager/network-manager.js");
	const dialog = require("../../utils/dialog.js");
	export default {
		components: {
			titlebara,
			empty
		},
		data() {
			return {
				text: "系统通知",
				img: "@appstatic/message/message_icon_titlebar.png",
				systemList: [],
				pagination: {
					loadmore: true,
					page: 1, //当前页
					totalPage: 1, //总页
					limit: 5,
					length: 100
				},
				total: '',
				allList: [],
				navigationBarHeight: app.globalData.navigationBarHeight,
				contentHeight: app.globalData.windowHeight - app.globalData.navigationBarHeight - (app.globalData
					.tabBarHeight),
				// isReady:0
				fromType: 'message'
			}
		},
		onLoad: function(options) {
			// this.loadData(true);
			if (util.isLogin(getApp())) {
				this.$fire.$on('systemMessage', function() {
					this.showSystemList(true);
				});
			}
			if (options.from) {
				this.fromType = options.from
			}
		},
		onShow: function(options) {
			this.showSystemList(true);
		},
		created() {
			// this.showSystemList(true);
		},
		methods: {
			handleToLower() {
				//debugger
				var that = this;
				if (that.pagination.loadmore) {
					// that.params.page+=1;
					that.pagination.page += 1;
					this.showSystemList(false);
				} else {
					uni.showToast({
						title: "暂无更多数据",
						duration: 3000,
						icon: 'none'
					})
				}
			},
			refresh(id) {
				debugger
				console.log(this.systemList)
				var list = this.systemList
				var length = this.systemList.length
				for (var i = 0; i < length; i++) {
					if (id == list[i].id) {
						list[i].isReady = 2
					}
				}
				//cccc
			},
			showSystemList(isRefresh) {
				console.log("showSystemList");
				var that = this;
				var uri = app.globalData.config.interfaces.URL_SYS_SENDMSG_GETLEVCMSG_TYPE;
				var params = {
					"pageNum": isRefresh ? 1 : that.pagination.page,
					"pageSize": that.pagination.limit, //
					"isType": 4
				};
				network.get(uri, params, 'form').then(res => {
					console.log(res.data);
					if (res.code == 200) {
						var _list = res.data.list;
						that.total = res.data.total
						if (isRefresh) {
							//总页数
							//debugger
							var totalPage = Math.ceil(res.data.total / that.pagination.limit);
							that.pagination.totalPage = totalPage;
							//length
							that.pagination.length = res.data.total;
							//停止下拉
							uni.stopPullDownRefresh()
							that.systemList = _list ? _list : []
						} else {
							if (_list && _list.length > 0) {
								that.systemList = [...that.systemList, ..._list]
							}
						}
						if (that.pagination.page == that.pagination.totalPage) {
							that.pagination.loadmore = false
						}
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.stopPullDownRefresh();
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				})
			},
			gotoMessage(item) {
				//debugger
				var uri = app.globalData.config.interfaces.URL_SYS_SENDMSG_GETLEVCMSGBYIDFRONT;
				var params = {
					"id": item.id
				};
				network.get(uri, params, 'form').then(res => {
					//debugger
					console.log(res)
					if (res.code == 200) {
						if (res.data.hyperchain !== '' && res.data.hyperchain !== null) {
							uni.navigateTo({
								url: './web-view?url=' + res.data.hyperchain + '&id=' + res.data.id +
									'&isType=' + res.data.isType + "&from=" + this.fromType
							});
						} else {
							uni.navigateTo({
								url: './systemMessage-detail?id=' + res.data.id + '&isType=' + res.data
									.isType + '&subType=' + res.data.subType + "&from=" + this.fromType,
							});
						}
						this.isReady = res.data.isReady
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					console.error(res, 'err');
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				})
			},
			//一键已读
			allRead() {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_SYS_SENDMSG_UPDATE_LEVCMSGUSERREADY;
				var params = {
					"isType": 4
				}
				network.post(uri, params, 'json').then(res => {
					if (res.code == 200) {
						//刷新前一页
						let pages = getCurrentPages();

						if (pages.length == 2) {
							let prePage = pages[pages.length - 2];
							// #ifdef H5
							prePage.refresh();
							// #endif

							// #ifdef APP-PLUS
							prePage.$vm.refresh();
							// #endif
						}
						that.showSystemList(true);
						util.syncBadge(getApp())
					}
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		width: 100vw;
		height: 100vh;
		/* height: calc(100vh - 44px); */
		background: url(@appstatic/message/message_icon_system_background.png) no-repeat bottom 60px right;
		background-size: 246.33px, 248.39px;
		background-color: #F5F5F5;
	}

	.system-message-list {
		/* padding-top:45px; */
		display: flex;
		flex-direction: column;
		padding-left: 24px;
		padding-right: 24px;
	}

	.item {
		margin-top: 20px;
		background-color: #ffffff;
	}

	/* .title {
		display: flex;
		flex-direction: row;
		vertical-align: middle;
		align-items: center;
	} */
	.title {
		font-weight: 400;
		font-size: 14px;
		line-height: 19.6px;

		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.time {
		font-weight: 400;
		font-size: 12px;
		line-height: 16.8px;
		color: #ADB0AE;
	}

	.showMore {
		width: 24px;
		height: 24px;
		position: absolute;
		left: 44px;
		top: calc(50% - 12px);
		/*#ifdef APP-PLUS||H5*/
		left: calc(100% - 36px);
		/*#endif*/
	}

	.titleText {
		color: #3D3A3A;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 600;
		font-size: 16px;
		align-items: center;
		display: flex;
		position: absolute;
		top: calc(50% - 10px);
		left: calc((100% - 40px)/2);
	}
</style>
